<template>
  <div id="">
    <div class="pickerTop">
      <span class="cancel" @click="cancel">取消</span>
      请选择
      <span class="sure" @click="sure">确定</span>
    </div>
    <mt-picker :slots="houseType" @change="houseTypeChange"></mt-picker>
  </div>
</template>
<script>
var bedroom = [], liveroom = [], washroom = [];
for (var i = 1; i < 11; i++) {
  bedroom[i] = i + '室';
  liveroom[i] = i + '厅';
  washroom[i] = i + '卫';
}
var houseType = [
    {
      flex: 1,
      values: bedroom,
      className: 'slot1',
      textAlign: 'center',
      defaultIndex:1,
    }, {
      divider: true,
      content: '-',
      className: 'slot2'
    }, {
      flex: 1,
      values: liveroom,
      className: 'slot3',
      textAlign: 'center',
      defaultIndex:1,
    }, {
      divider: true,
      content: '-',
      className: 'slot3'
    }, {
      flex: 1,
      values: washroom,
      className: 'slot4',
      textAlign: 'center',
      defaultIndex:1,
    }
  ];
export default {
  name: "",
  data: () => ({
    houseType:[],           //户型弹出数组
    pickerValue:['1室','1厅','1卫'],
  }),
  methods: {
    cancel() {
      this.$emit('houseTypeEvent','');
    },
    sure() {
      var that = this;
      var pickerValue = that.pickerValue;
      if(pickerValue.length<1){
        pickerValue = ['1室','1厅','1卫'];
      }
      that.$emit('houseTypeEvent',pickerValue);
    },
    // 设置房源类型
    houseTypeChange(picker, values){
      var that = this;
      var defRoom = houseType[0].values[1];
      var defLive = houseType[2].values[1];
      var defWash = houseType[4].values[1];

      if(!values[0]){
         picker.setSlotValue(0,defRoom);
      }
       if(!values[1]){
         picker.setSlotValue(1, defLive);
      }
      if(!values[2]){
        picker.setSlotValue(2, defWash);
      }
      that.pickerValue = values;
    },
  },
  mounted() {
    //do something after mounting vue instance
    this.houseType = houseType;
  }
}
</script>
<style lang="scss" scoped>

.picker-item.picker-selected{
  color: $greenColor;
}
.pickerTop{
  @include flex;
  justify-content: space-around;
  border-bottom: 1px solid $borderColor;
  line-height: 2rem;
  padding: 10px 0;
  .cancel{
    color: $lightColor;
  }
  .sure{
    color: $greenColor;
  }
}
</style>
